<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         h1{
            width:400px;
            margin:20px auto;
        }
        div{
            width: 400px;
            margin:0 auto;

        }
        .save{
            width:250px;
            height: 35px;
            margin: 0 auto;
        }
        .save input{
            width:100px;
            height: 30px;
            border-radius: 4px;
            font-size: 16px;

        }
        .return{
            width:250px;
            height: 35px;
            margin: 10px auto;
        }
        .return a{
            text-decoration: none;
            display: block;
            width:100px;
            height: 30px;
            border-radius: 4px;
            font-size: 16px;
            text-align: center;
            line-height: 30px;
            color:black;
            background-color:rgb(221, 221, 221);
            border-radius: 4px;
            box-shadow: 1px 1px 1px rgb(41, 40, 40);
        }
    </style>
</head>

<body>
    <h1>学生信息修改页</h1>
    <div>
        <p>
            姓名:
            <input type="text" name="username">
        </p>
        <p>
            电话:
            <input type="text" name="phone">
        </p><p>
            年龄:
            <input type="text" name="age">
        </p>
        <p>
            性别:
            <input type="text" name="gender">
        </p>
        <p>
            邮箱:
            <input type="text" name="email">
        </p>
        <p>
            备注:
            <input type="text" name="desc">
        </p>
        <p class="save">
            <input type="button" value="保存" onclick="save()">
        </p>
        <p class="return">
            <a href="/1.html">返回</a>
        </p>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        var id = location.hash.replace('#', '');
        console.log(id);
        $.get('/users/find', { id: id }).done(function (result) {
            //将数据库里的username属性赋值给html用户名
            $('[name = username]').val(result.username);
            //将数据库里的phone属性赋值给html联系方式
            $('[name = phone]').val(result.phone);
            $('[name = age]').val(result.age);
            $('[name = gender]').val(result.gender);
            $('[name = email]').val(result.email);
            $('[name = desc]').val(result.desc);
           
        })
        //点击事件
        function save() {
            //获取用户名的值
            var username = $('[name = username]').val();
            //获取联系方式的值
            var phone = $('[name = phone]').val();
            var age = $('[name = age]').val();
            var gender = $('[name = gender]').val();
            var email = $('[name = email]').val();
            var desc = $('[name = desc]').val();
            //ajax传参
            $.post('/users/edit', {
                //定义用户名
                username: username,
                //定义联系方式
                phone: phone,
                age:age,
                gender:gender,
                email:email,
                desc:desc,
                //定义id
                id:id
                //传参成功后的操作
            }).then(function (result) {
                //直接刷新到添加的页面
                location.href = './1.html'
            });
        }
    </script>
</body>

</html>